/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Table, TableBody, TableRow, Text, TableHead, BlobInputList,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import {useOmnipotentPrefMove, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";
import {useMeasureInpFilter} from "../../common/hooks";
import {css} from "@emotion/react";

export const tail注解 = <Text css={{"@media print": {fontSize: '0.75rem'}}}>
  注：本表填写设计值。
</Text>;
/**@param view: 是不是正式报告的，否则给编辑器用的
 * */
const setConfigP =(orc:any,edit:boolean)=> [
  ['额起重', [ ], '额定起重量', 'kg',],
  ['全长无叉', [{t:'全长', s:2}], '无货叉', 'mm'],
  ['全长有叉', [{}], '有货叉',  'mm'],
  ['车轮宽', [{t:'全宽', s:2}], '车轮宽', 'mm'],
  ['车架宽', [{}], '车架宽',  'mm'],
  ['门架高', [{t:'全高', s:3}], '不起升门架高度','mm'],
  ['顶架高', [{}], '护顶架（司机室）高度', 'mm'],
  ['最大高', [{}], '作业时最大高度', 'mm'],
  ['轴距', [], '轴距', 'mm'],
  ['前悬距', [], '前悬距', 'mm'],
  ['前轮距', [], '前轮距', 'mm'],
  ['后轮距', [], '后轮距', 'mm'],
    //【需特殊处理】 2行有4个字段的：
  ['地隙下空', [{t:'最小离地间隙', s:2}], '门架下端（空载 / 满载）', 'mm'],
  ['地隙中空', [{}], '车架中部（空载 / 满载）', 'mm'],
  ['最起升', [], '无载最大起升高度', 'mm'],
  ['自由升', [], '自由起升高度', 'mm'],
  ['全自升', [], '全自由起升高度', 'mm'],
  ['架前倾角', [], '门架（货叉）前倾角', '（ °）'],
  ['架后倾角', [], '门架（货叉）后倾角', '（ °）'],
  ['整机质量', [], '标准无载状态下整机质量', 'kg'],
  ['无最起速', [], '无载最大起升速度', 'mm/s'],
  ['满最起速', [], '满载最大起升速度', 'mm/s'],
  ['转弯半径', [], '最小转弯半径', 'mm'],
  ['无最运速', [], '无载最大运行速度', 'km/h'],
  ['满最运速', [], '满载最大运行速度', 'km/h'],
  ['满最爬坡', [], '满载最大爬坡度', '%'],
  ['满最牵力', [], '满载最大牵引力', 'kN'],
  ['载心距', [], '标准载荷中心距', 'mm'],
  ['防爆级', [], '防爆等级',  ],
];
const item检验项 =setConfigP(undefined,false);
export const itemA参数: string[] = ['地隙下满','地隙中满' ];
item检验项.forEach(([name, title, initIsp], i: number) => {
    itemA参数.push(name as string);
});
//3、样机主要参数
export const DesignParameter =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const [getInpFilter] = useMeasureInpFilter(null, itemA参数,);
      const config = item检验项;
      const titNode=useOmnipotentPrefTitle({config, });
      //只有一个字段的： 改成会对象的存储。
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {config.map(([name, _1, _2, unit]: any, i: number) => {
              return (<React.Fragment key={i}>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]}&nbsp;
                  {(12 === i || 13 === i) && '空载'}
                     <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    <BlobInputList value={inp?.[name] || ''}  rows={1}
                                   style={{display: 'inline-flex', width: '9rem', maxWidth: '100%', fontSize: '1rem',}}
                                   listStyle={css({fontSize: '1rem',})}
                                   onListChange={v => setInp({...inp, [name]: v || undefined}) }/>&nbsp;{unit}
                  </div>
                </div>
                {12 === i ? <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>门架下端（满载）
                      <BlobInputList value={inp?.地隙下满 || ''} rows={1}
                                     style={{display: 'inline-flex', width: '9rem', maxWidth: '100%', fontSize: '1rem',}}
                                     listStyle={css({fontSize: '1rem',})}
                                     onListChange={v => setInp({...inp, 地隙下满: v || undefined}) }/>&nbsp;{unit}
                    </div>
                    :
                    13 === i ? <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>车架中部（满载）
                      <BlobInputList value={inp?.地隙中满 || ''} rows={1}
                                     style={{display: 'inline-flex', width: '9rem', maxWidth: '100%', fontSize: '1rem',}}
                                     listStyle={css({fontSize: '1rem',})}
                                     onListChange={v => setInp({...inp, 地隙中满: v || undefined}) }/>&nbsp;{unit}
                    </div>
                        : null
                }
              </React.Fragment>);
            })}
            <hr/>
            {children}
            {tail注解}
          </InspectRecordLayout>
    );
  });

//定制:单位栏目的span：【耦合】和配置相关！
const itemRender=(orc: any, name:string,i:number,item:any,xmcspan:number,unit:any)=><>
  <CCell colSpan={xmcspan}>{item}</CCell>
  { 1===i? <CCell colSpan={xmcspan} rowSpan={11} split>{unit}</CCell> :
      12===i? <CCell colSpan={xmcspan} rowSpan={5}>{unit}</CCell> :
        ((i>1 && i<12) || (i>12 && i<17))? null :
            <CCell>{unit??'—'}</CCell>
  }
  {12===i? <CCell>{orc?.[name]?? '—'} ／ {orc?.地隙下满?? '—'}</CCell> :
      13===i? <CCell>{orc?.[name]?? '—'} ／ {orc?.地隙中满?? '—'}</CCell> :
          <CCell>{orc?.[name] ?? '—'}</CCell>
  }
</>;
/**设计参数，但不采用设备台账的同样内容。
 * */
export const DesignParameterVw = ({orc, rep,op,title}: { orc: any, rep: any,op?:boolean,title:any}
) => {
  const render = useOmnipotentPrefMove({orc,
        config: item检验项,  tag:'DesignP',itemRender, pcols: 1, noNo: false, unitCel: true});
  return <>
    <div css={{"@media print": {paddingBottom: '8rem', pageBreakInside: 'avoid'}}}>
      <Text id='DesignParameter' variant="h4" css={{textAlign: op? undefined:'center', marginTop: op?'1rem':undefined,
      }}>{title}</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>{op?'记录':'报告'}编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["6%","14%", "%","13%", "24%"] }
              css={{borderCollapse: 'collapse', "@media print": {marginTop: '-8rem'}}} tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell><Text css={{fontSize: '0.75rem'}}>序号</Text></CCell><CCell colSpan={2}>项目</CCell><CCell>单位</CCell><CCell>数值</CCell>
        </TableRow>
      </TableHead>
      <TableBody rheight={31}>
        <RepLink rep={rep} tag={'DesignParameter'}>
          {render}
        </RepLink>
      </TableBody>
    </Table>
    {op && tail注解}
  </>;
};
